<template>
  <div class="center-section-content">
    <div class="device-tabs">
      <div
        v-for="device in deviceList"
        :key="device.id"
        :class="['device-tab', { active: activeDevice === device.id }]"
        @click="handleDeviceClick(device.id, device)"
      >
        <div @click="handleTypeClick(device.type)" class="tab-type">
          {{ device.name }}监测
        </div>
        <div>
          <span>{{ device.name }}</span>
          <span>-</span>
          <span class="fonts-DIN">{{ device.total }}</span>
        </div>
      </div>
    </div>
  </div>
</template> 

<script>
import { EventBus } from "../../utils/event-bus";
export default {
  name: "Center",
  data() {
    return {
      activeDevice: "qixiang",
      deviceList: [
        {
          id: "qixiang",
          name: "气象",
          total: 0,
          deviceData: "",
          type: "qixiang",
        },
        {
          id: "kongqi",
          name: "空气质量",
          total: 0,
          deviceData: "",
          type: "kongqi",
        },
        {
          id: "turang",
          name: "土壤",
          total: 0,
          deviceData: "",
          type: "turang",
        },
        {
          id: "shuizhi",
          name: "水质",
          total: 0,
          deviceData: "",
          type: "shuizhi",
        },
      ],
      devices: [],
      total: 0,
    };
  },
  mounted() {
    this.activeDevice=this.$route.query.deviceType;
    this.$api.device.getDeviceList().then((res) => {
      this.devices = res;
      this.deviceList.forEach((device, index) => {
        res.forEach((item) => {
          if (device.name === item.name) {
            this.deviceList[index].total =
              item.status.normal + item.status.offline + item.status.error;
            this.deviceList[index].deviceData = item;
            // this.deviceList[index].type = item.type
          } else {
          }
        });
      });
      this.handleDeviceClick(this.deviceList[0].id, this.deviceList[0]);
      this.$emit("devices-loaded", this.devices);
    });
  },
  methods: {
    handleDeviceClick(deviceId, deviceData) {
      // 然后发送点击事件
      this.$emit("device-click", deviceData);
      // 在地图上添加标注
      this.addMapMarkers(deviceData);
      this.$router.push({
        path: "/BiologicalObservation",
        query:{deviceType:deviceId}
      });
    },
    addMapMarkers(device) {
      // 根据设备类型获取对应的标注数据
      let apiUrl = "";
      let deviceType = "";
      switch (device.name) {
        case "气象":
          apiUrl = "/cockpitapi/habitat/qixiang/getDeviceList";
          deviceType = "qixiang";
          break;
        case "土壤":
          apiUrl = "/cockpitapi/habitat/turang/getDeviceList";
          deviceType = "turang";
          break;
        case "空气质量":
          apiUrl = "/cockpitapi/habitat/kongqi/getDeviceList";
          deviceType = "kongqi";
          break;
        default:
          return;
      }

      this.activeDevice = device.id;
      EventBus.$emit("set-biological-device-type", device.type);
      // 调用API获取设备位置数据
      this.$api.environment
        .getDeviceList(device.type)
        .then((response) => {
          if (response) {
            // 通过 Vuex 更新标注数据
            this.$store.dispatch("map/updateMarkers", {
              markers: response.map((item) => ({
                ...item,
                icon: this.getMarkerIcon(deviceType, item.localStatus),
              })),
              deviceType: device.name,
            });
          }
        })
        .catch((error) => {
          console.error("Error fetching device locations:", error);
        });
    },
    getMarkerIcon(deviceType, status) {
      const statusMap = {
        1: "normal",
        2: "offline",
        3: "abnormal",
      };
      const statusSuffix = statusMap[status] || "normal";
      return require(`@/assets/img/${deviceType}-${statusSuffix}.png`);
    },
  },
};
</script>

<style lang="scss" scoped>
.statistics-position-container {
  position: absolute;
  top: 54px;
  left: 83px;
  z-index: 1000;
  pointer-events: auto;
  width: 79%;
}
.statistics-container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .statistics-item {
    width: 90px;
    height: 65px;
    background: url("@/assets/img/species-statistics-bg.png") no-repeat center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;

    .value {
      font-size: 24px;
      font-weight: bold;
      color: #07ffe5;
    }

    .label {
      font-size: 14px;
      margin-top: 4px;
    }
  }
}

.device-tabs {
  display: flex;
  gap: 10px;
  padding: 10px;
}

.device-tab {
  width: 134px;
  height: 60px;
  pointer-events: auto;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  background: url("@/assets/img/species-center-tab-normal-bg.png") no-repeat
    center;
  background-size: 100% 100%;
  transition: all 0.3s ease;
  user-select: none;
  position: relative;
  .tab-type {
    position: absolute;
    font-size: 9px;
    left: 15px;
    margin-top: 0;
    color: #ccc;
  }
  &.active {
    background-image: url("@/assets/img/species-center-tab-active-bg.png");
    span {
      color: #fff;
    }
  }

  &:hover {
    color: #fff;
  }
  span {
    font-size: 18px;
    display: inline-block;
    margin-top: 10px;
    color: #ccc;
  }
  div {
    font-size: 12px;
    color: #ccc;
    margin-top: 13px;
  }
}
</style>
